import { BUS_THEME, BusDetail } from '@/apis/bus';
import Bg from '@/assets/choise-bg.jpg';
import { history, useQuery, useSearchParams } from 'umi';

import ButtonDraw from '@/assets/draw-button-2.png';
import NickNameTitle from '@/assets/join-96.png';
import ButtonView from '@/assets/join-97.png';
import ButtonStart from '@/assets/join-98.png';

import ProductImage from '@/assets/complate-1.png';
import { useMemo, useState } from 'react';

import { getUserInfo } from '@/apis/user';
import StatusTitle from '@/assets/join-95.png';
import BusNike from '@/components/Bus/Nike';
import BusZhuDi from '@/components/Bus/Zhudi';
import FixedButtons from '@/components/FixedButtons';
import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';
import TweenOne from 'rc-tween-one';

// ## 需要携带参数 busId=xx
export default function Page() {
  const [searchParams] = useSearchParams();
  const busId = searchParams?.get('busId');

  const [step, setStep] = useState<1 | 2>(1);

  const { data: user } = useQuery(['get:user'], () => getUserInfo());

  // ?车队信息
  const { data: bus, refetch: refetchBus } = useQuery(
    ['bus:detail'],
    () => BusDetail({ id: busId! }),
    {
      enabled: !!busId,
    },
  );

  // ?找到发起人
  const initiator = useMemo(() => bus?.passengers?.[0], [bus]);
  // ?参与人
  const participant = useMemo(() => bus?.passengers?.[1], [bus]);

  return (
    <>
      <FixedButtons />
      <XyzTransitionGroup
        appear
        appearVisible
        xyz="fade up-2 appear-stagger"
        className="min-h-screen relative overflow-hidden bg-cover bg-top pt-[150px]"
        style={{
          backgroundImage: `url(${Bg})`,
        }}
      >
        {/* title */}
        <div className="text-center">
          <div className="leading-none text-center inline-flex justify-center items-center space-x-2 space-y-2 flex-wrap">
            <h4
              className=" inline-block text-[52px] text-[#a2ff3d] font-bold m-0"
              style={{
                textShadow: '1px 1px 1px rgba(0,0,0,.3)',
              }}
            >
              @{initiator?.name}
            </h4>
            <span
              className="w-[399px] h-[58px] bg-cover inline-block"
              style={{
                backgroundImage: `url(${NickNameTitle})`,
              }}
            ></span>
          </div>
        </div>
        <p
          className="w-[calc(306px/1.2)] h-[calc(102px/1.2)] bg-cover mx-auto mt-3"
          style={{
            backgroundImage: `url(${StatusTitle})`,
          }}
        />

        <div xyz="fade" className="relative">
          <TweenOne
            animation={{
              type: 'from',
              x: window.innerWidth + 500,
              duration: 3000,
            }}
            className="busContainer w-[1400px] relative -left-[320px] mt-[70px]"
          >
            {bus?.theme === BUS_THEME.NIKE && (
              <BusNike
                readonlyFriend
                readonly
                selfAvatar={initiator?.head}
                friendAvatar={participant?.head}
              />
            )}
            {bus?.theme === BUS_THEME.ZHUDI && (
              <BusZhuDi
                readonlyFriend
                readonly
                selfAvatar={initiator?.head}
                friendAvatar={participant?.head}
              />
            )}
          </TweenOne>
        </div>

        {Boolean(user?.left_cj) && (
          <button
            xyz="fade up-2 stagger"
            onClick={() => history.push('/draw')}
            className="w-[350px] h-[90px] active:scale-95 mx-auto block mt-12"
            style={{
              backgroundImage: `url(${ButtonDraw})`,
              backgroundSize: '100% 100%',
            }}
          />
        )}

        <button
          onClick={() => setStep(2)}
          className="w-[350px] h-[90px] bg-cover active:scale-95 mx-auto block mt-4 relative"
          style={{
            backgroundImage: `url(${ButtonStart})`,
          }}
        >
          <TweenOne
            paused={step === 1}
            animation={{
              left: '90%',
              onComplete: function () {
                history.replace('/?restart=1');
              },
            }}
            className="w-[calc(92px/1.2)] h-[calc(150px/1.2)] bg-cover absolute -left-[40px] -top-[20px]"
            style={{
              backgroundImage: `url(${ProductImage})`,
            }}
          />
        </button>

        <button
          onClick={() => history.push('/route')}
          className="w-[350px] h-[90px] bg-cover active:scale-95 mx-auto block mt-4"
          style={{
            backgroundImage: `url(${ButtonView})`,
          }}
        />
      </XyzTransitionGroup>
    </>
  );
}
